<!doctype html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>background: -uu-gradient</title>
<style>
.view {
  padding: 10px; /* shadow padding */
}
div.base {
  width: 300px;
  height: 200px;
  text-align: center;
  color: white;
  font-size: 2em;
  font-family: Verdana, Helvetica, sans-serif;
  font-weight: bold;
  padding-top: 20px;
  margin: auto;
}
div.sample1 {
  -uu-background-color: #004466;
  -uu-background-image: -uu-gradient(linear, left top, left bottom, from(#004466), color-stop(0.5, #00aaee), to(#ffffff));
}
div.sample2 {
  -uu-background-image: -uu-gradient(linear, right top, left bottom, from(#66ff00), color-stop(0.3, #ffff00), color-stop(0.7, #ff00ff), to(#00aaff));
}
div.sample3 {
  -uu-background-image: -uu-gradient(linear, left top, right bottom, from(rgba(102,255,0,0.5)), to(#00aaff));
}
</style>
<script>
window.UUMETA_DEBUG = 1;
</script>
<script type="text/xaml" id="xaml"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<!--
<script src="../../../src/uuMeta.js"></script>
<script src="../../../src/uuMeta.cdsl.js"></script>
<script src="../../../src/uuMeta.data.js"></script>
<script src="../../../src/uuMeta.event.resize.js"></script>
<script src="../../../src/uuMeta.normalize.js"></script>
<script src="../../../src/uuCodec.js"></script>
<script src="../../../src/uuToken.js"></script>
<script src="../../../src/uuImage.js"></script>
<script src="../../../src/uuStyle.js"></script>
<script src="../../../src/uuStyle.shadow.js"></script>
<script src="../../../src/uuStyle.opacity.js"></script>
<script src="../../../src/uuStyleSheet.js"></script>
<script src="../../../src/uuQuery.js"></script>
<script src="../../../src/uuColor.js"></script>
<script src="../../../src/uuCanvas.js"></script>
<script src="../../../src/uuLayer.js"></script>
<script src="../../../src/uuCSSValidator.js"></script>
<script src="../../../src/uuAltCSS.js"></script>
<script src="../../../src/uuAltCSS.ie.js"></script>
<script src="../../../src/uuAltCSS.imports.js"></script>
<script src="../../../src/uuAltCSS.cleanup.js"></script>
<script src="../../../src/uuAltCSS.calcspec.js"></script>
<script src="../../../src/uuAltCSS.boxeffect.js"></script>
 -->
<script src="../../uuAltCSS.js"></script>

</head><body>
<h1>-uu-gradient:</h1>
<p>IE6, IE7 では -uu-xxx: と一緒に margin: auto を指定して、要素をセンタリングすることが出来ません(制限事項)。
   <br />IE6, IE7 では margin: auto を margin: 0 として処理します。
</p>


<div class="view">
  <div class="base sample1">GRADIENT</div>
</div>


<div class="view">
  <div class="base sample2">GRADIENT</div>
</div>


<div class="view">
  <div style="background-image: url(../../img/lena.jpg)">
    <div class="base sample3">GRADIENT</div>
  </div>
</div>

</body></html>
